<template>
	<view class="apply">
		<view class="user-form">
			<view class="title">完善信息</view>
			<view class="form-item flex align-center">
				<view class="item-left">姓名</view>
				<input type="text" v-model="requestData.realname" placeholder="请输入你的名字" placeholder-class="input-css">
			</view>
			<picker :range="array" range-key="title" @change="sexPicker">
				<view class="form-item flex align-center">
					<view class="item-left">性别</view>
					<view style="flex: 1;">{{sexData.title}}</view>
					<image src="../../static/index/zu904-2x.png" mode="" style="width: 20rpx;height: 20rpx;"></image>
				</view>
			</picker>
			<view class="form-item flex align-center">
				<view class="item-left">电话</view>
				<input type="number" v-model="requestData.mobile" placeholder="请输入电话" placeholder-class="input-css">
			</view>
			<view class="form-item flex align-center">
				<view class="item-left">微信号</view>
				<input type="text" v-model="requestData.wechat" placeholder="请输入微信号" placeholder-class="input-css">
			</view>
		</view>
		<view class="button">
			<view @tap="submit">提交</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				array: [{title:'男',id:1}, {title:'女',id:0}],
				sexData:{title:'男',id:1},
				requestData:{
					id:'',
					realname:'',
					mobile:'',
					wechat:'',
					gender:1
				}
			}
		},
		onLoad(option) {
			console.log(option.id)
			this.requestData.id = option.id
		},
		methods: {
			submit(){
				let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/
				if(!this.requestData.realname) return this.msg('请输入姓名')
				if(!this.requestData.mobile) return this.msg('请输入手机号')
				if(!reg.test(this.requestData.mobile)) return this.msg('请输入正确的手机号')
				if(!this.requestData.wechat) return this.msg('请输入微信号')
				this.$H.post(this.$api.community_join, {
					...this.requestData
				}, {
					token: true
				}).then(res => {
					// this.msg('提交成功')
					uni.showModal({
						title:'友情提示',
						content:'你的申请已提交，请等待米欧客服联系您',
						showCancel:false,
						success: resp =>{
							if(resp.confirm){
								uni.navigateBack()
							}
						}
					})
					
				})
			},
			sexPicker(e) {
				console.log(e)
				this.sexData = this.array[e.detail.value]
				this.requestData.gender = this.array[e.detail.value].id
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F3F3F3;
	}

	.apply {
		.title {
			padding: 40rpx 0 10rpx 0;
			position: relative;
			font-size: 34rpx;
			font-weight: bold;
			color: #202020;

			&.title:before {
				content: '';
				position: absolute;
				bottom: 10rpx;
				left: 4rpx;
				width: 132rpx;
				height: 10rpx;
				background: linear-gradient(90deg, #FFB24B 0%, rgba(255, 178, 75, 0) 100%);
			}
		}

		.user-form {
			padding: 0 30rpx;
			background-color: #fff;

			.form-item {
				border-bottom: 1px solid #F6F6F6;
				padding: 40rpx 0;

				.item-left {
					width: 260rpx;
					font-size: 28rpx;
					font-weight: 400;
					color: #202020;
					line-height: 28rpx;
				}

				input {
					flex: 1;
				}

				.input-css {
					font-size: 28rpx;
					font-weight: 400;
					color: #8D8D8D;
					line-height: 28rpx;
				}
			}

		}

		.user-form>view:last-child {
			border: none;
		}

		.button {
			padding: 20rpx 36rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			background-color: #fff;
			z-index: 99;

			view {
				text-align: center;
				padding: 24rpx 0;
				background: #FFB24B;
				border-radius: 34px;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 28rpx;
			}
		}
	}
</style>
